<template>
  <div class="screen-container">
    <header>
      <div class="header-title">数据可视化大屏</div>
    </header>
    <main>
      <section class="aside-section width28">

        <!-- 市辖区数据图 -->
        <div class="section-item flex1 ease1">
          <cityBarChart :title="cityTitle"/>
        </div>

        <div class="section-item flex1 ease2">
        </div>

        <div class="section-item flex1 ease3">
          <loveItem :title="loveTitle"/>
        </div>

      </section>
      <section class="center-section width44">

        <div class="center-item height60">
          <chinaMap />
        </div>

        <div class="height40 center-bottom-box ease7">
          <!-- 常住人口饼状图 -->
          <personNumPieChart :title="personNumTitle"/>
        </div>

      </section>
      <section class="aside-section width28">

        <div class="section-item flex1 ease4">
          <trafficmonitorChart :title="trafficmonitorTitle"/>
        </div>

        <!-- 各市景点数量分布 -->
        <div class="section-item flex1 ease5">
          <attractionGaugeChart :title="attractionGaugeTitle"/>
        </div>

        <!-- 苏超联赛数据对比图 -->
        <div class="section-item flex1 ease6">
          <footBallGameBarChart :title="footBallGameTitle"/>
        </div>

      </section>
    </main>
  </div>
</template>

<script>
import cityBarChart from '@/components/dataScreen/cityBarChart.vue';
import footBallGameBarChart from "@/components/dataScreen/footBallGameBarChart.vue";
import personNumPieChart from "@/components/dataScreen/personNumPieChart.vue";
import attractionGaugeChart from '@/components/dataScreen/attractionGaugeChart.vue';
import chinaMap from "@/components/dataScreen/chinaMap.vue";
import trafficmonitorChart from "@/components/dataScreen/trafficmonitorChart.vue";
import loveItem from '@/components/dataScreen/loveItem.vue';

export default{
  name: "dataScreen",
  data() {
    return {
      cityTitle: '市辖区数据',
      attractionGaugeTitle: '各市景点数量分布',
      footBallGameTitle: '苏超联赛数据对比',
      personNumTitle: '各市常住人口比例图',
      trafficmonitorTitle: '各省流量监测数据',
      loveTitle: '用程序换一个爱心[doge]',
      barIcon: ''
    }
  },
  components: {
    cityBarChart,
    footBallGameBarChart,
    personNumPieChart,
    attractionGaugeChart,
    chinaMap,
    trafficmonitorChart,
    loveItem
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
$easeTimer: 1;
@function ease-time($easeTimer) {
  @return unquote($easeTimer + 's');
}
.screen-container {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url("~@/assets/bg.png");
  background-size: 100% 100%;
  @for $i from 1 through 10 {
    .ease#{$i} {
      animation: ease ease-time($easeTimer + $i);
    }
  }
  @keyframes ease {
    from {
      opacity: 0; // 初始透明度
    }
  }
  header {
    width: 100%;
    height: 8%;
    background: url("~@/assets/title.png");
    background-size: 100% 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    .header-title {
      color: white;
      font-size: 2rem;
      margin: auto 0;
    }
  }
  main {
    width: 100%;
    height: 92%;
    display: flex;
    justify-content: space-between;
    .width28 {
      width: 28%;
    }
    .aside-section {
      display: flex;
      flex-direction: column;
      .section-item {
        background: url("~@/assets/operation.png");
        background-size: 100% 100%;
        margin: .5rem 1rem;
        display: flex;
        flex-direction: column;
        .item-title {
          color: white;
          width: 100%;
          height: 13%;
          display: flex;
          flex-direction: column;
          align-content: center;
        }
        .item-box {
          width: 100%;
          height: 85%;
        }
      }
    }
    .flex1 {
      flex: 1;
    }
    .center-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .center-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
      }
      .height60 {
        height: 60%;
      }
      .height40 {
        height: 40%;
      }
      .center-bottom-box {
        width: 100%;
        background: url("~@/assets/operation2.png");
        background-size: 100% 100%;
        margin-bottom: .5rem;
        .item-title {
          color: white;
          width: 100%;
          height: 11%;
          display: flex;
          flex-direction: column;
          align-content: center;
        }
        .item-box {
          width: 100%;
          height: 89%;
        }
      }
    }
    .width44 {
      width: 44%;
    }
  }
}
</style>
